import {ContentView, ContentViewNoFooter} from '@/components/main/contentView'
import {ViewLeftNotFooter} from '@/components/main/viewLeft'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {
  CheckHistoryMainViewNav,
  CheckHistoryTable,
  handle_currentDevInfo_by_route_params_currentDevInfo,
  CheckHistoryViewLeft,
  CheckHistoryViewLeftNav,
  CheckHistoryModel,
} from './components'

export default defineComponent({
  name: 'device-checkHistory',
  setup() {
    let {route} = useGlobalAPI()

    const initPage = () => {
      if (route.path === '/device/list/checkHistory') {
        if (Object.keys(route.query).length > 0) {
          handle_currentDevInfo_by_route_params_currentDevInfo({
            devId: Number(route.query.devId),
            devName: route.query.devName as string,
          })
        }
      }
    }
    onMounted(async () => {
      initPage()
    })
    watch(route, n => {
      initPage()
    })
    return () => {
      if (route.path === '/device/list/checkHistory') {
        return (
          <div class="h-full flex">
            <ViewLeftNotFooter>
              {{
                nav: () => <CheckHistoryViewLeftNav></CheckHistoryViewLeftNav>,
                content: () => <CheckHistoryViewLeft></CheckHistoryViewLeft>,
              }}
            </ViewLeftNotFooter>
            <ContentViewNoFooter>
              {{
                nav: () => <CheckHistoryMainViewNav></CheckHistoryMainViewNav>,
                content: () => <CheckHistoryTable></CheckHistoryTable>,
              }}
            </ContentViewNoFooter>
            <CheckHistoryModel></CheckHistoryModel>
          </div>
        )
      } else {
        return <router-view></router-view>
      }
    }
  },
})
